import React,{useEffect, useState} from 'react';
import { Button,  Form, Input, Select, Switch,DatePicker,message ,ConfigProvider} from 'antd';
import * as service from '../../../../api/cyyindex'
import type { DatePickerProps } from 'antd';

import { useNavigate,  useSearchParams } from 'react-router-dom';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'antd/locale/zh_CN';
import './rosteradd.scss'
interface Props{

}
function RosterAdd(props: Props) {
  const [form] = Form.useForm();
  const [messageApi, contextHolder] = message.useMessage();
  const [mydate, setMydate] = useState('')
  const [myday,setMyday]=useState('')
  const navigate = useNavigate()
  const [params,setParams]=useSearchParams()
  const [detailList,setDetailList]=useState<any>({})
  const onChange1: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    if (params.get('id')) {
      setMyday(dateString)
      
    }
    
setMydate(dateString)
  };
  useEffect(() => {
    if (params.get('id')) {
      service.staff_employee({ rid: params.get('id') }).then(res => {
        console.log(res)
        setDetailList(res.data.data[0])
        setMyday(res.data.data[0].data)
        form.setFieldsValue(res.data.data[0])
      })
    }
    
  },[])
  const onFinish = (values: any) => {
      
      console.log('Success:', values);
    values.data = mydate.slice(0)
    if (params.get('id')) {
      console.log(values);
      values.rid=params.get('id')
      service.staff_edit1(values).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          messageApi.open({
            type: 'success',
            content: '修改成功',
          });
          navigate('/index/staff/roster')
        }
      })
    } else {
      service.staff_add1(values).then(res => {
        console.log(res)
        
        if (res.data.code == 200) {
          messageApi.open({
            type: 'success',
            content: '添加成功',
          });
          navigate('/index/staff/roster')
        } 
       

      })
    }
      
      };
   
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
  
  const myJump = () => {
    navigate(-1)
  }
 
    return (
      <div className='roster-add'>
      
        <p className='title'>{ params.get('id')?'编辑':'新增'}员工</p>
        <Form
          form={form}
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >

    <Form.Item
      label="姓名"
      name="name"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="工号"
      name="jobnumber"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item name="section" label="部门组织">
        <Select
      defaultValue="请选择"
     options={[
        { value: '行政', label: '行政' },
        { value: '人事', label: '人事' },
        { value: '策划', label: '策划' },
        { value: '产品', label: '产品', },
        { value: '设计', label: '设计', },
        { value: '研发', label: '研发', },
      ]}
    />
    </Form.Item>
    <Form.Item
      label="职位"
       name="station"
    >
      <Select
      defaultValue="请选择"
    
      options={[
        { value: '产品经理', label: '产品经理' },
        { value: '设计主管', label: '设计主管' },
        { value: '设计师', label: '设计师' },
        { value: '前台', label: '前台',  },
      ]}
    />
    </Form.Item>
    <Form.Item
      label="手机号"
      name="tel"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      label="证件类型"
      name="papers"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      label="身份证号"
      name="idnumber"
      rules={[{ required: true, message: '请输入身份证号!' }]}
    >
      <Input />
    </Form.Item>
   
                <Form.Item
      label="工作地点"
      name="address"
    >
      <Select
      defaultValue="请选择"
      
      options={[
        { value: '总公司  总部', label: '总公司  总部' },
        { value: '杭州分部  分公司', label: '杭州分部  分公司' },
        { value: '海南分部  分公司', label: '海南分部  分公司' },
        { value: '天津分部  办事处', label: '天津分部  办事处' },
      ]}
    />
    </Form.Item>
    <Form.Item
      label="工作城市"
      name="jobaddress"
    >
      <Input defaultValue='浙江省杭州市西湖区' />
    </Form.Item>
    <Form.Item
      label="员工类型"
      name="type"
    >
      <Select
      defaultValue="请选择"
      
      options={[
        { value: '全职', label: '全职' },
        { value: '兼职', label: '兼职' },
        { value: '实习生', label: '实习生' },
        { value: '劳务派遣', label: '劳务派遣' },
      ]}
    />
    </Form.Item>
    <Form.Item
      label="入职日期"
      name="data"
          >
            {
              params.get('id') ?
                <ConfigProvider locale={locale}>
              <DatePicker value={dayjs(myday, 'YYYY-MM-DD')} onChange={onChange1} />
            </ConfigProvider>:
              <ConfigProvider locale={locale}>
              <DatePicker  onChange={onChange1} />
            </ConfigProvider>
            }
      
    </Form.Item>
    <Form.Item
      label="员工状态"
      name="flag"
    >
      <Switch  />
    </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            {
            params.get('id')? <Button type="primary" htmlType="submit">
           修改
                </Button>: <Button type="primary" htmlType="submit">
        保存
            </Button>
            }
            
     
            <Button onClick={()=>{myJump()}}>取消</Button>
    </Form.Item>
    
        </Form>
        { contextHolder}
        </div>
    );
}

export default RosterAdd;